<template>
  <el-card class="poi-card" shadow="hover" @click="handleClick">
    <template #header>
      <div class="poi-header">
        <span>{{ poi.name }}</span>
        <el-tag type="info">{{ poi.type }}</el-tag>
      </div>
    </template>
    <div class="poi-desc">{{ poi.description }}</div>
    <div class="poi-footer">
      <span>📍 {{ poi.city }}</span>
      <div class="actions">
        <el-button size="small" type="primary" @click.stop="onRoute">路线</el-button>
        <el-button size="small" @click.stop="viewDetail">详情</el-button>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue'
import { useRouter } from 'vue-router'

interface POI {
  id: number
  name: string
  type: string
  lat: number
  lng: number
  city: string
  description: string
}

const props = defineProps<{ poi: POI }>()
const emit = defineEmits<{ (e: 'select', poi: POI): void; (e: 'route', poi: POI): void }>()
const router = useRouter()

const handleClick = () => emit('select', props.poi)
const onRoute = () => emit('route', props.poi)
const viewDetail = () => router.push({ name: 'POIDetail', params: { id: props.poi.id } })
</script>

<style scoped>
.poi-card {
  margin-bottom: 16px;
  cursor: pointer;
}
.poi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.poi-desc {
  margin: 10px 0;
  color: #606266;
}
.poi-footer {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #909399;
  align-items: center;
}
.actions {
  display: flex;
  gap: 8px;
}
</style>